<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 版权所有，侵权必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 *
-->

<template>
  <div class="order-box">
    <s-header :name="'我的订单'" :back="'/user'"></s-header>
    <van-tabs @change="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab" v-model="status">
      <van-tab title="全部" name=''></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
          <div class="order-item-header">
            <span>订单时间：{{ item.createTime }}</span>
            <span>{{ item.orderStatusString }}</span>
          </div>
          <van-card
            v-for="one in item.newBeeMallOrderItemVOS"
            :key="one.orderId"
            :num="one.goodsCount"
            :price="one.sellingPrice"
            desc="全场包邮"
            :title="one.goodsName"
            :thumb="prefix(one.goodsCoverImg)"
          />
          <!-- 新增订单总价显示区域 -->
          <div class="order-total-price">
            <span class="total-label">订单总价：</span>
            <span class="total-amount">¥ {{ item.totalPrice }}</span>
            <span class="delivery-type" :class="getDeliveryTypeClass(item.deliveryType)">
              {{ getDeliveryTypeText(item.deliveryType) }}
            </span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import { getOrderList } from '../service/order'
import { prefix } from '@/common/js/utils'

export default {
  data() {
    return {
      status: '',
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      page: 1
    }
  },
  components: {
    sHeader
  },
  methods: {
    async loadData() {
      const { data, data: { list } } = await getOrderList({ pageNumber: this.page, status: this.status })
      this.list = this.list.concat(list)
      this.totalPage = data.totalPage
      this.loading = false;
      if (this.page >= data.totalPage) this.finished = true
    },
    onChangeTab(name, title) {
      this.status = name
      this.onRefresh()
    },
    goTo(id) {
      this.$router.push({ path: `order-detail?id=${id}` })
    },
    goBack() {
      this.$router.go(-1)
    },
    onLoad() {
      if (!this.refreshing && this.page < this.totalPage) {
        this.page = this.page + 1
      }
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.loadData()
    },
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.page = 1
      this.onLoad()
    },
    // 获取配送方式文本
    getDeliveryTypeText(deliveryType) {
      if (deliveryType === 1) {
        return '自提';
      } else if (deliveryType === 2) {
        return '快递';
      } else {
        return '未知';
      }
    },
    // 获取配送方式样式类
    getDeliveryTypeClass(deliveryType) {
      if (deliveryType === 1) {
        return 'delivery-pickup';
      } else if (deliveryType === 2) {
        return 'delivery-express';
      } else {
        return '';
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';
.order-box {
  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .order-name {
      font-size: 14px;
    }
  }
  .order-tab {
    margin-top: 44px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
  }
  .order-list-refresh {
    margin-top: 68px;
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head {
      background: #f9f9f9;
    }
    .van-list {
      min-height: calc(100vh - 88px);
      background: #f9f9f9;
      margin-top: 20px;
    }
    .order-item-box {
      margin: 20px 10px;
      background-color: #fff;
      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }
      .van-card {
        background-color: #fff;
        margin-top: 0;
      }
      // 新增订单总价样式
      .order-total-price {
        padding: 10px 20px;
        text-align: right;
        border-top: 1px solid #f5f5f5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .total-label {
          color: #666;
          font-size: 14px;
        }
        .total-amount {
          color: #ee0a24;
          font-size: 16px;
          font-weight: bold;
          margin: 0 10px;
        }
        .delivery-type {
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 3px;
          &.delivery-pickup {
            background: #e7f7ff;
            color: #1989fa;
            border: 1px solid #d1ebff;
          }
          &.delivery-express {
            background: #f0f9eb;
            color: #07c160;
            border: 1px solid #e1f3d8;
          }
        }
      }
    }
  }
}
</style>
